<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div class="app">
        <h1>{{title}}</h1>
        <input type="text" v-model="title">

        <h1>多选框</h1>
        <input type="checkbox" value="1" id="a" v-model="agree">
        <label for="a">你同意嘛？{{agree}}</label>
        <input type="checkbox" value="2" id="b" v-model="agree">
        <label for="b">你同意嘛？{{agree}}</label>
        <input type="checkbox" value="11" v-model="agree1">{{agree1}}
        <h1>你的爱好是：{{hobbys}}</h1>
        <input type="checkbox" id="game" value="游戏" v-model="hobbys">
        <label for="game">游戏</label>
        <input type="checkbox" id="c" value="旅游" v-model="hobbys">
        <label for="c">旅游</label>
        <input type="checkbox" id="ball" value="篮球" v-model="hobbys">
        <label for="ball">篮球</label>
        <h1>下拉框</h1>

        <select v-model="opt">

        <option value="" disabled>请选择</option>
        <option :value="item.name" v-for="(item,index) in city" :key="index">
            {{item.code}}-{{item.name}}
        </option>

         </select>{{opt}}
        <h1> 单选框</h1>
        <h3>你喜欢的小动物是:{{animation}}</h3>
        <input type="radio" id="dog" :value="a" v-model="animation">
        <label for="dog">小狗</label>
        <input type="radio" id="cat" :value="b" v-model="animation">
        <label for="cat">小猫</label>
        <input type="radio" id="tigger" :value="c" v-model="animation">
        <label for="tigger">小猫</label>
        <!-- 单选框的name值相等必须 -->
        <input type="radio" name="dan">
        <input type="radio" name="dan">

        <input type="checkbox" v-model="yss" :true-value="yes" :false-value="no">{{yss}}
    </div>
    <script>
        const vm = new Vue({
            data: {

                yss: '',
                yes: "我答应",
                no: "我不同意",
                title: "v-model数据双向绑定",
                agree: [],
                agree1: '',
                hobbys: [],
                animation: "",
                a: "小狗",
                b: "小猫",
                c: "小老虎",
                opt: '',
                city: [{
                    name: "北京",
                    code: 'BJ'
                }, {
                    name: "上海",
                    code: 'SH'
                }, {
                    name: "深圳",
                    code: 'SZ'
                }, {
                    name: "武汉",
                    code: 'WH'
                }],

            }

        }).$mount('.app')
    </script>
</body>

</html>